<template>
    <el-card class="border-0">
        <el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
            <el-row :gutter="24">
                <el-col :span="5" :offset="0">
                    <el-form-item label="字典编码">
                        <el-input size="small" v-model="searchForm.code" placeholder="字典编码" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5" :offset="0">
                    <el-form-item label="字典值">
                        <el-input size="small" v-model="searchForm.value" placeholder="字典值" clearable></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="11">
                    <div class="flex items-center justify-end">
                        <el-button size="small" type="primary" @click="getData(1)">搜索</el-button>
                        <el-button size="small" @click="resetSearchForm">重置</el-button>
                        <el-button size="small" type="primary" @click="handleCreate">新增</el-button>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="5" :offset="0">
                    <el-form-item label="父编码">
                        <el-input size="small" v-model="searchForm.parentCode" placeholder="父编码" clearable></el-input>
                    </el-form-item>
                </el-col>

            </el-row>

        </el-form>

        <!-- 表格数据 -->
        <el-table :data="tableData" stripe style="width: 100%"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
            <el-table-column label="字典编码" align="center" prop="code"></el-table-column>

            <el-table-column label="字典值" align="center" prop="value"></el-table-column>
            <el-table-column label="字典值(en)" align="center" prop="valueEn"></el-table-column>
            <el-table-column label="备注" align="center" prop="remark"></el-table-column>
            <el-table-column label="父编码" align="center" prop="parentCode"></el-table-column>
            <el-table-column label="创建时间" align="center">
                <template #default="{ row }">
                    {{ dateFormatter(row.createTime) }}
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button @click="handleEdit(scope.row)" type="primary" size="small" text>编辑</el-button>
                    <el-popconfirm title="确定删除字典记录吗?" @confirm="handleDelete(scope.row)">
                        <template #reference>
                            <el-button type="primary" size="small" text>删除</el-button>
                        </template>
                    </el-popconfirm>

                </template>

            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <div class="flex items-center justify-center mt-5">
            <el-pagination background layout="prev, pager ,next" :total="searchForm.total"
                :current-page="searchForm.pageNo" :page-size="searchForm.pageSize" @current-change="getData" />
        </div>


    </el-card>

    <FormDrawer ref="formDrawerRef" :showSubBtn="showSubBtn" :title="drawerTitle" @submit="handleSubmit"
        @isClosed="isClosed">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="100px" :inline="false">

            <el-form-item label="编码" prop="code">
                <el-input :disabled="!showSubBtn" v-model="form.code" placeholder="编码"></el-input>
            </el-form-item>
            <el-form-item label="编码值" prop="value">
                <el-input :disabled="!showSubBtn" v-model="form.value" placeholder="编码值"></el-input>
            </el-form-item>
            <el-form-item label="编码英文值" prop="valueEn">
                <el-input :disabled="!showSubBtn" v-model="form.valueEn" placeholder="编码英文值"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input :disabled="!showSubBtn" v-model="form.remark" placeholder="备注"></el-input>
            </el-form-item>
            <el-form-item label="父编码" prop="parentCode">
                <el-input :disabled="!showSubBtn" v-model="form.parentCode" placeholder="父编码"></el-input>
            </el-form-item>
        </el-form>
    </FormDrawer>
</template>

<script setup>
import { reactive, onMounted, ref, computed } from 'vue'
import { sysDict_addOrUpdate_api, sysDict_pageQuery_api } from '~/api/official_article_api';
import FormDrawer from "~/components/FormDrawer.vue";
import { transferSex, transferPcState, dateFormatter } from '~/utils/common.js'
import { toast, toastWarn } from "~/composables/util"

// ------------- data -------------------------
const tableData = ref([])
const searchFormInitObject = {
    id: '',
    pageNo: 1,
    pageSize: 10,
    code: '',
    value: '',
    parentCode: '',
    total: 1,
}
const formInit = {
    id: '',
    code: '',
    value: '',
    valueEn: '',
    remark: '',
    parentCode: ''

}
const searchForm = reactive(searchFormInitObject)
const drawerTitle = ref('')
const form = reactive(formInit)
const formRef = ref(null)
const formDrawerRef = ref(null)
const showSubBtn = ref(false)
//执行表单校验
const rules = {
    code: [
        { required: true, message: '编码', trigger: 'change' }
    ],
    value: [
        { required: true, message: '编码值', trigger: 'change' }
    ],
    valueEn: [
        { required: true, message: '编码英文值', trigger: 'change' }
    ],
    remark: [
        { required: true, message: '备注', trigger: 'change' }
    ],
    parentCode: [
        { required: true, message: '父编码', trigger: 'change' }
    ],

}



// -------------- function -------------------
function getData() {
    sysDict_pageQuery_api(searchForm).then(res => {
        tableData.value = res.records
    })
}

function handleCreate() {
    drawerTitle.value = '新增'
    resetForm(formInit)
    form.id = ''
    //打开弹窗
    showSubBtn.value = true;
    formDrawerRef.value.open()
}

// 重置表单
function resetForm(row = false) {
    if (formRef.value) {
        formRef.value.resetFields()
    }
    if (row) {
        for (const key in form) {
            form[key] = row[key]
        }
    }
}

// 提交表单
function handleSubmit() {
    formRef.value.validate((valid) => {
        console.log('校验结果：', valid)
        if (!valid) return

        //loading
        formDrawerRef.value.showLoading()
        sysDict_addOrUpdate_api(form).then(res => {
            toast(drawerTitle.value + "成功")
            // 修改刷新当前页，新增刷新第一页
            getData()
            formDrawerRef.value.close()
        }).finally(() => {
            //close loading
            formDrawerRef.value.hideLoading()
        })
    })
}

// 修改
function handleEdit(row) {
    drawerTitle.value = '修改'
    resetForm(row)
    showSubBtn.value = true;
    formDrawerRef.value.open()
}

// ------------- life ------------------------
onMounted(() => {
    getData();
})

</script>

<style></style>